<template>
  <div class="home">
    <h2 class="title">购物车</h2>
     <div v-for="(item,index) of products" :key="item.id">
    <div class="item">
      <van-checkbox class="choose" v-model="item.isSelected"></van-checkbox>
      <van-card :price="item.productPrice" :desc="item.productInfo" :title="item.productName" :thumb="item.productCover">
       <div slot="bottom">
            <van-tag plain>小计:{{item.productPrice*item.productCount|money(2)}}</van-tag>
          </div>
        <div slot="footer">
          <van-stepper class="num" v-model="item.productCount" integer /> 
          <van-button size="mini" type="danger" class="delete" @click="toggle(index)" >删除</van-button>
        </div>
      </van-card>
    </div>
         <modal v-show="isShow"  @del="handleDelete" @cel="handleCel"/>
    </div>

    <van-submit-bar :price="sum*100" button-text="提交订单">
      <van-checkbox v-model="checkAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>

/* import { Dialog } from 'vant'; */
import Modal from '@/components/Modal.vue'
export default {
  
  name: 'home',
  data() {
      return {
          products:[],
             isShow:false,
             index:null
      }
  },
  components:{
    Modal
  },
  
   mounted() {
    var url = "http://yapi.demo.qunar.com/mock/35398/";
    this.axios.get(url).then(res => {
      this.products = res.data
     
    })
  },
   filters: {
    money(val, params) {
      return "￥" + val.toFixed(params);
    }
  },
  computed:{
       checkAll: {
      get() {
        return this.products.every(item => item.isSelected);
      },
      set(val) {
        this.products.forEach(item => (item.isSelected = val));
      }
    },
     sum() {
     
      var total = 0;
      for (let i = 0; i < this.products.length; i++) {
        if (this.products[i].isSelected) {
          total = total + this.products[i].productCount * this.products[i].productPrice;
        } else {
          continue;
        }
      }
      return total;
    }
    
  },
  methods:{
//      handledelete(item){
//          /*  var products = this.products.filter(value =>value !==item)
//           this.products= products */
//           Dialog.confirm({
//   title: '标题',
//   message: '弹窗内容'
// }).then(() => {
//   var products = this.products.filter(value =>value !==item)
//           this.products= products
// }).catch(() => {
//   // on cancel
// });
//       }
 toggle(index){
      this.isShow =  true;
      this.index=index
    },
    handleDelete(){
      this.isShow = false
    },
    handleCel(){
      this.products.splice(this.index,1)
      this.isShow = false
    }
  }
}
</script>
<style >
  .title {
  font-size: 30px;
}
.item{
    position: relative;
}
.choose{
    position: absolute;
    top:30px;
    z-index: 15;
}
.delete{
    position: absolute;
  right: 15px;
  bottom: 70px;
}
.num{
    position: absolute;
    right: 15px;
    bottom: 20px;
}
</style>
